<?php

/*
 * transfert/add.phtml
 */
?>
<?php
$title = "Effectuer un Transfert";
$this->headTitle($title);

// Variables
$site	 = $this->site;
$sites	 = $this->sites;
?>
<div class='content-head'>
    <h3><?php echo $title; ?> pour le site <a href='#' id='site' data-type='select' onclick='return false;'><?php echo $site->libelle; ?></a></h3>
</div>

<div class='content-body' id='step1'>
    <div class='site-container'>
	<h5>Cliquer un Site pour afficher la liste des employés à transférer vers <b><em><?php echo $site->libelle ?></em></b></h5>
	<div class='site-center'>
	    <?php foreach ($sites as $s): ?>
		<?php if ((int) $s->id == 0 || (int) $s->id == $site->id) continue; ?>
    	    <div class='site-one'>
    		<a href='#' class='site-link' data-id='<?php echo $s->id; ?>'><?php echo $s->libelle; ?></a>
    	    </div>
	    <?php endforeach; ?>
	</div>
    </div>
    <div class='site-employes' id='employeList'>
	<!-- AJAX CONTENT -->
    </div>

</div>

<div class='content-body' id='step2' style='display: none;'>
    <div class='site-container'>
	<p>
	    Transfert de <span id='employeName' class='variable'></span> du Site <span id='siteDepart' class='variable'></span> vers le Site <span id='siteArrivee' class='variable'></span>
	</p>
	<label>
	    <span>A la Date : </span>
	    <a href='#' id='date' data-type='combodate'><?php echo date('Y-m-d'); ?></a>
	</label>
	<label>
	    <span>Heure d'entrée : </span>
	    <a href='#' id='entree' data-type="combodate" data-template='HH:mm' data-format="HH:mm" data-viewformat="HH:mm">00:00</a>
	</label>
	<label>
	    <span>Heure de Sortie : </span>
	    <a href='#' id='sortie' data-type="combodate" data-template='HH:mm' data-format="HH:mm" data-viewformat="HH:mm">00:00</a>
	</label>
	<label>
	    <span>Pause :</span>
	    <input type="checkbox" name="pause" id="pause">
	</label>
	<label>
	    <span>Repas :</span>
	    <input type="checkbox" name="repas" id="repas">
	</label>
	<label>
	    <span>Commentaire : </span>
	    <a href='#' id='commentaire' data-type='textarea'></a>
	</label>
	<div style='float: right; margin-top: -30px;'>
	    <button type='button' class='btn btn-inverse goback'>Retour</button>
	    <button type='button' class='btn btn-success next'>Effectuer le Transfert</button>
	</div>
    </div>
</div>

<form id='transfertForm' action='<?php echo $this->url('RHX/default', array('controller'	 => 'transfert', 'action'	 => 'makeTransfert')) ?>' method='post'>
    <input type='hidden' id='data-matricule' name='matricule' value=''>
    <input type='hidden' id='data-depart' name='depart' value=''>
    <input type='hidden' id='data-arrivee' name='arrivee' value=''>
    <input type='hidden' id='data-journee' name='jour' value='<?php echo date('Y-m-d'); ?>'>
    <input type='hidden' id='data-entree' name='entree' value='00:00'>
    <input type='hidden' id='data-sortie' name='sortie' value='00:00'>
    <input type="hidden" id="data-pause" name="pause" value="0">
    <input type="hidden" id="data-repas" name="repas" value="0">
    <input type='hidden' id='data-commentaire' name='commentaire' value=''>
</form>

<script type='text/javascript'>
    // Démarrage
    $(function(){
	// Editable Site
	$('#site').editable({
	    title: 'Liste des Sites',
	    source: '<?php echo $this->url('RHX/default', array('controller'	 => 'employe', 'action'	 => 'jsonSiteList')) ?>',
	    validate: function(value){
		window.location.href = "<?php echo $this->url('RHX/default', array('controller'	 => 'transfert', 'action'	 => 'add')) ?>/" + value;
	    }
	});

	// Clic Site
	$('.site-link').click(function(e){
	    e.preventDefault();
	    id = $(this).attr('data-id');
	    ajax = $.ajax({
		type: 'post',
		url : '<?php echo $this->url('RHX/default', array('controller'	 => 'transfert', 'action'	 => 'employeListBySite')) ?>/' + id + '/<?php echo $site->id; ?>'
	    });
	    ajax.error(function(){
		alert('Erreur de chargement');
	    });
	    ajax.success(function(data){
		$('#employeList').hide().html(data).fadeIn('normal');
	    });
	    // Activer la sélection
	    $('.site-selected').removeClass('site-selected');
	    $(this).addClass('site-selected');
	});

	// Clic sur bouton
	$('.goback').click(function(e){
	    e.preventDefault();
	    $('#step1').toggle('slide');
	    $('#step2').toggle('slide');
	});

	// Transfert
	$('.next').click(function(e){
	    e.preventDefault();
	    $('#transfertForm').submit();
	});

	// Step 2 Editable
	$('#date').editable({
	    title: 'Date du Transfert',
	    template: 'D / MMMM / YYYY',
	    placement: 'right',
	    validate: function(value) {
		month = (parseInt(value.month()) + 1);
		monthText = (month < 10) ? '0' + month : month;
		day = (parseInt(value.date()));
		dayText = (day < 10) ? '0' + day : day;
		var val = value.year() + '-' + monthText + '-' + dayText;
		$('#data-journee').val(val);
	    }
	});
	$('#entree').editable({
	    placement: 'right',
	    format: 'HH:mm',
	    combodate: {
		firstItem: 'name'
	    },
	    title: "Heure & Minute",
	    validate: function(value) {
		var val = value.hour() + ':' + value.minute();
		$('#data-entree').val(val);
	    }
	});
	$('#sortie').editable({
	    placement: 'right',
	    format: 'HH:mm',
	    combodate: {
		firstItem: 'name'
	    },
	    title: "Heure & Minute",
	    validate: function(value) {
		var val = value.hour() + ':' + value.minute();
		$('#data-sortie').val(val);
	    }
	});
	$('#commentaire').editable({
	    title: "Commentaire",
	    validate: function(value){
		$('#data-commentaire').val(value);
	    }
	});
	$("#pause").click(function(e){
	    //e.preventDefault();
	    pause = ($("#pause").prop('checked')) ? 1 : 0;
	    $('#data-pause').val(pause);
	});
	$("#repas").click(function(e){
	    //e.preventDefault();
	    repas = ($("#repas").prop('checked')) ? 1 : 0;
	    $('#data-repas').val(repas);
	});
    });
</script>

<style type='text/css'>
    .site-container{
	width: 98%;
	border: solid 2px #6699ff;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 0px #666666;
	margin: auto;
	padding: 5px;
	background: #f5f5f5;
    }
    .site-center{
	width: 100%;
	margin: 1em auto;
    }
    .site-one{
	display: inline-block;
	width: 17%;
	height: 2em;
	background: #fff;
	border: solid 1px #e9e9e9;
	margin: 5px;
	vertical-align: middle;
	text-align: center;
    }
    .site-one a{
	display: block;
	width: 100%;
	height: 100%;
    }
    .site-one:hover{
	border-radius: 3px;
	box-shadow: 0px 0px 3px #666666;
    }
    .site-selected{
	border: solid 2px #333333;
	border-radius: 3px;
	box-shadow: 0px 0px 3px #666666;
    }
    .employe-one{
	display: inline-block;
	width: 47%;
	height: 2em;
	margin: 5px;
	background: #f5f5f5;
	border: solid 1px #cccccc;
    }
    .employe-one a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 3px 5px;
    }
    .employe-one:hover{
	border-radius: 3px;
	box-shadow: 0px 0px 3px #666666;
    }
    .site-employes{
	width: 98%;
	border: solid 2px #333333;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 0px #666666;
	margin: 1.2em auto;
	padding: 5px;
    }
    .variable{
	font-weight: bolder;
    }
    .site-container label span{
	display: inline-block;
	width: 200px;
    }
    .site-container label a{
	display: inline-block;
	max-width: 300px;
    }
</style>